<template>
	<view class="container">
		<!-- 商品轮播图 -->
		<swiper class="product-swiper" circular indicator-dots autoplay interval="5000" :indicator-color="'rgba(255, 255, 255, 0.5)'" :indicator-active-color="'#ffffff'">
			<swiper-item v-for="(item, index) in product.images" :key="index">
				<image :src="item" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>
		
		<!-- 顶部导航按钮 -->
		<view class="nav-buttons">
			<view class="nav-btn back-btn" @click="goBack">
				<uni-icons type="back" size="20" color="#ffffff"></uni-icons>
			</view>
			<view class="nav-btn share-btn" @click="shareProduct">
				<uni-icons type="share" size="20" color="#ffffff"></uni-icons>
			</view>
		</view>
		
		<!-- 商品价格信息 -->
		<view class="price-section">
			<view class="price-row">
				<text class="price">¥{{product.price}}</text>
				<text class="original-price" v-if="product.originalPrice">¥{{product.originalPrice}}</text>
			</view>
			<view class="sales-info">
				<text>销量 {{product.sales}}件</text>
			</view>
		</view>
		
		<!-- 商品基本信息 -->
		<view class="product-info section">
			<text class="product-title">{{product.title}}</text>
			<view class="product-subtitle">{{product.subtitle}}</view>
		</view>
		
		<!-- 选择规格 -->
		<view class="specs-select section" @click="openSpecsPopup">
			<view class="specs-label">
				<text>选择</text>
				<text class="specs-value">{{selectedSpecsText || '颜色、尺码'}}</text>
			</view>
			<uni-icons type="right" size="16" color="#999"></uni-icons>
		</view>
		
		<!-- 评价 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">商品评价 ({{product.ratings.length}})</text>
				<view class="section-more" @click="goToRatings">
					<text>查看更多</text>
					<uni-icons type="arrow-right" size="14" color="#999"></uni-icons>
				</view>
			</view>
			<view class="rating-preview" v-if="product.ratings.length > 0">
				<view class="rating-user">
					<image class="user-avatar" :src="product.ratings[0].avatar" mode="aspectFill"></image>
					<text class="user-name">{{product.ratings[0].username}}</text>
				</view>
				<text class="rating-content">{{product.ratings[0].content}}</text>
				<view class="rating-images" v-if="product.ratings[0].images && product.ratings[0].images.length > 0">
					<image v-for="(img, index) in product.ratings[0].images" :key="index" :src="img" mode="aspectFill" class="rating-image"></image>
				</view>
			</view>
			<view class="no-rating" v-else>
				<text>暂无评价</text>
			</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="section">
			<view class="section-header">
				<text class="section-title">商品详情</text>
			</view>
			<view class="detail-content">
				<view v-for="(item, index) in product.details" :key="index" class="detail-item">
					<image v-if="item.type === 'image'" :src="item.content" mode="widthFix" class="detail-image"></image>
					<text v-else-if="item.type === 'text'" class="detail-text">{{item.content}}</text>
				</view>
			</view>
		</view>
		
		<!-- 底部购买栏 -->
		<view class="buy-bar">
			<view class="action-buttons">
				<view class="action-btn" @click="goToHome">
					<uni-icons type="home" size="20" color="#666"></uni-icons>
					<text class="action-text">首页</text>
				</view>
				<view class="action-btn" @click="toggleFavorite">
					<uni-icons :type="product.isFavorite ? 'star-filled' : 'star'" size="20" :color="product.isFavorite ? '#ff6b6b' : '#666'"></uni-icons>
					<text class="action-text">收藏</text>
				</view>
				<view class="action-btn" @click="goToCart">
					<uni-icons type="cart" size="20" color="#666"></uni-icons>
					<text class="action-text">购物车</text>
				</view>
			</view>
			<view class="buy-buttons">
				<view class="add-cart-btn" @click="openSpecsPopup">加入购物车</view>
				<view class="buy-now-btn" @click="openSpecsPopup">立即购买</view>
			</view>
		</view>
		
		<!-- 规格选择弹窗 -->
		<uni-popup ref="specsPopup" type="bottom" background-color="#fff">
			<view class="specs-popup">
				<view class="popup-header">
					<image class="popup-product-image" :src="product.images[0]" mode="aspectFill"></image>
					<view class="popup-product-info">
						<text class="popup-product-price">¥{{product.price}}</text>
						<text class="popup-product-specs">{{selectedSpecsText || '请选择规格'}}</text>
					</view>
					<view class="popup-close" @click="closeSpecsPopup">
						<uni-icons type="close" size="20" color="#999"></uni-icons>
					</view>
				</view>
				
				<scroll-view scroll-y class="popup-content">
					<view class="specs-group" v-for="(group, groupIndex) in product.specs" :key="groupIndex">
						<text class="specs-group-title">{{group.name}}</text>
						<view class="specs-options">
							<view 
								class="specs-option" 
								v-for="(option, optionIndex) in group.options" 
								:key="optionIndex" 
								:class="{ active: isSpecSelected(groupIndex, optionIndex) }" 
								@click="selectSpec(groupIndex, optionIndex)"
							>
								{{option}}
							</view>
						</view>
					</view>
					
					<view class="quantity-section">
						<text class="quantity-title">数量</text>
						<view class="quantity-control">
							<view class="quantity-btn" @click="decreaseQuantity">
								<uni-icons type="minus" size="16" color="#666"></uni-icons>
							</view>
							<text class="quantity-val">{{quantity}}</text>
							<view class="quantity-btn" @click="increaseQuantity">
								<uni-icons type="plus" size="16" color="#666"></uni-icons>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<view class="popup-footer">
					<view class="confirm-btn" @click="confirmSelection">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				quantity: 1,
				selectedSpecs: [null, null], // 默认两个规格组：颜色和尺码
				actionType: '', // 'add-cart' 或 'buy-now'
				product: {
					id: 1,
					title: '简约设计感宽松上衣',
					subtitle: '舒适面料，简洁设计，随性百搭',
					price: 399,
					originalPrice: 599,
					sales: 230,
					isFavorite: false,
					images: [
						'https://images.unsplash.com/photo-1604176424472-17cd740f74e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fGZhc2hpb24lMjBvdmVyc2l6ZWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						'https://images.unsplash.com/photo-1631541911232-5c2b492e0c3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NjZ8fGZhc2hpb24lMjBvdmVyc2l6ZWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60',
						'https://images.unsplash.com/photo-1626948683848-8ec362171c26?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODF8fGZhc2hpb24lMjBvdmVyc2l6ZWR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
					],
					specs: [
						{
							name: '颜色',
							options: ['灰色', '黑色', '白色']
						},
						{
							name: '尺码',
							options: ['S', 'M', 'L']
						}
					],
					ratings: [
						{
							username: '用户***123',
							avatar: 'https://img.icons8.com/color/48/000000/user-male-circle--v1.png',
							content: '面料很舒服，款式简约大方，穿着很显瘦，非常满意的一次购物体验！',
							images: [
								'https://images.unsplash.com/photo-1571908599407-cdb918ed83bf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8ZmFzaGlvbiUyMGZsYXRsYXl8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
							]
						}
					],
					details: [
						{
							type: 'text',
							content: '商品名称：简约设计感宽松上衣'
						},
						{
							type: 'text',
							content: '商品编号：SP123456789'
						},
						{
							type: 'text',
							content: '材质：95%棉 5%氨纶'
						},
						{
							type: 'image',
							content: 'https://images.unsplash.com/photo-1699019950419-ffe12ae956b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHQlMjBzaGlydCUyMGRldGFpbHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
						},
						{
							type: 'text',
							content: '洗涤说明：30℃以下，温柔手洗，不可漂白。'
						},
						{
							type: 'image',
							content: 'https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTN8fHQlMjBzaGlydCUyMGRldGFpbHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
						}
					]
				}
			}
		},
		computed: {
			selectedSpecsText() {
				if (this.selectedSpecs[0] === null || this.selectedSpecs[1] === null) {
					return '';
				}
				return `${this.product.specs[0].options[this.selectedSpecs[0]]}，${this.product.specs[1].options[this.selectedSpecs[1]]}`;
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				// 这里应该根据id获取商品信息，当前使用示例数据
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			shareProduct() {
				uni.showToast({
					title: '分享功能暂未开放',
					icon: 'none'
				});
			},
			openSpecsPopup(e) {
				this.actionType = e.currentTarget.innerText === '加入购物车' ? 'add-cart' : 'buy-now';
				this.$refs.specsPopup.open();
			},
			closeSpecsPopup() {
				this.$refs.specsPopup.close();
			},
			isSpecSelected(groupIndex, optionIndex) {
				return this.selectedSpecs[groupIndex] === optionIndex;
			},
			selectSpec(groupIndex, optionIndex) {
				this.selectedSpecs[groupIndex] = optionIndex;
			},
			increaseQuantity() {
				if (this.quantity < 99) {
					this.quantity++;
				}
			},
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--;
				}
			},
			confirmSelection() {
				// 检查是否已选择所有规格
				if (this.selectedSpecs.includes(null)) {
					uni.showToast({
						title: '请选择完整规格',
						icon: 'none'
					});
					return;
				}
				
				// 添加到购物车或立即购买
				if (this.actionType === 'add-cart') {
					this.addToCart();
				} else {
					this.buyNow();
				}
			},
			addToCart() {
				uni.showToast({
					title: '已加入购物车',
					icon: 'success'
				});
				this.closeSpecsPopup();
			},
			buyNow() {
				uni.navigateTo({
					url: '/pages/checkout/checkout'
				});
				this.closeSpecsPopup();
			},
			toggleFavorite() {
				this.product.isFavorite = !this.product.isFavorite;
				uni.showToast({
					title: this.product.isFavorite ? '已收藏' : '已取消收藏',
					icon: 'none'
				});
			},
			goToHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			goToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			},
			goToRatings() {
				uni.navigateTo({
					url: `/pages/ratings/ratings?id=${this.product.id}`
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding-bottom: 60px; // 为底部栏留出空间
}

// 轮播图
.product-swiper {
	height: 350px;
}

.swiper-image {
	width: 100%;
	height: 100%;
}

// 导航按钮
.nav-buttons {
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 15px;
	z-index: 10;
}

.nav-btn {
	width: 36px;
	height: 36px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

// 价格信息
.price-section {
	background-color: #fff;
	padding: 15px;
}

.price-row {
	display: flex;
	align-items: baseline;
}

.price {
	font-size: 24px;
	font-weight: bold;
	color: #ff6b6b;
}

.original-price {
	font-size: 13px;
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}

.sales-info {
	font-size: 12px;
	color: #999;
	margin-top: 8px;
}

// 商品信息
.section {
	margin-top: 10px;
	background-color: #fff;
	padding: 15px;
}

.product-title {
	font-size: 16px;
	font-weight: 500;
	color: #333;
	line-height: 1.4;
}

.product-subtitle {
	font-size: 13px;
	color: #666;
	margin-top: 8px;
	line-height: 1.4;
}

// 规格选择
.specs-select {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.specs-label {
	font-size: 14px;
	color: #333;
}

.specs-value {
	color: #666;
	margin-left: 10px;
}

// 评价
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.section-title {
	font-size: 15px;
	font-weight: 500;
	color: #333;
}

.section-more {
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #999;
}

.rating-preview {
	margin-top: 10px;
}

.rating-user {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.user-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.user-name {
	font-size: 12px;
	color: #666;
	margin-left: 8px;
}

.rating-content {
	font-size: 13px;
	color: #333;
	line-height: 1.5;
}

.rating-images {
	display: flex;
	margin-top: 10px;
}

.rating-image {
	width: 80px;
	height: 80px;
	margin-right: 5px;
	border-radius: 4px;
}

.no-rating {
	text-align: center;
	padding: 20px 0;
	color: #999;
	font-size: 13px;
}

// 商品详情
.detail-content {
	padding: 5px 0;
}

.detail-item {
	margin-bottom: 10px;
}

.detail-text {
	font-size: 13px;
	color: #333;
	line-height: 1.5;
}

.detail-image {
	width: 100%;
	border-radius: 4px;
}

// 底部购买栏
.buy-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	background-color: #fff;
	display: flex;
	align-items: center;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
	z-index: 10;
}

.action-buttons {
	display: flex;
	padding: 0 5px;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 10px;
}

.action-text {
	font-size: 10px;
	color: #666;
	margin-top: 3px;
}

.buy-buttons {
	flex: 1;
	display: flex;
	height: 100%;
}

.add-cart-btn, .buy-now-btn {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.add-cart-btn {
	color: white;
	background-color: #ff9800;
}

.buy-now-btn {
	color: white;
	background-color: #ff6b6b;
}

// 规格选择弹窗
.specs-popup {
	width: 100%;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	border-radius: 16px 16px 0 0;
	overflow: hidden;
}

.popup-header {
	display: flex;
	padding: 15px;
	position: relative;
	padding-bottom: 20px;
	border-bottom: 1px solid #f0f0f0;
}

.popup-product-image {
	width: 80px;
	height: 80px;
	border-radius: 4px;
}

.popup-product-info {
	flex: 1;
	margin-left: 15px;
	padding-top: 5px;
}

.popup-product-price {
	font-size: 18px;
	font-weight: bold;
	color: #ff6b6b;
	margin-bottom: 8px;
	display: block;
}

.popup-product-specs {
	font-size: 13px;
	color: #666;
}

.popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 5px;
}

.popup-content {
	padding: 15px;
	max-height: 60vh;
}

.specs-group {
	margin-bottom: 15px;
}

.specs-group-title {
	font-size: 14px;
	color: #333;
	margin-bottom: 10px;
	display: block;
}

.specs-options {
	display: flex;
	flex-wrap: wrap;
}

.specs-option {
	padding: 6px 12px;
	margin: 0 10px 10px 0;
	border-radius: 4px;
	font-size: 13px;
	color: #333;
	background-color: #f0f0f0;
	
	&.active {
		color: #ff6b6b;
		background-color: rgba(255, 107, 107, 0.1);
		border: 1px solid #ff6b6b;
	}
}

.quantity-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}

.quantity-title {
	font-size: 14px;
	color: #333;
}

.quantity-control {
	display: flex;
	align-items: center;
}

.quantity-btn {
	width: 28px;
	height: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 4px;
}

.quantity-val {
	width: 40px;
	text-align: center;
	font-size: 14px;
}

.popup-footer {
	padding: 10px 15px 25px;
}

.confirm-btn {
	height: 40px;
	background-color: #ff6b6b;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	font-size: 15px;
}
</style> 